<!doctype html>

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Nimbus tooling</title>
</head>

<style>
  body,
  html {
    font-family: monospace;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .row-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
  }

  .first-row {
    background-image: url("https://our.status.im/content/images/2018/12/Artboard-1-copy-15@2x.png");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 100%;
    border: none;
    margin: 0;
    padding: 0;
  }

  .second-row {
    flex-grow: 1;
    border: none;
    margin: 0;
    padding: 0;
  }
</style>
<div class="row-container">
  <div class="first-row">
    <p><a href="https://github.com/status-im/nimbus-eth2#state-transition-simulation">Ethereum Beacon Chain state transition simulation</a> (unoptimized work in progress, you might run out of memory)</p>
    <form action="state_sim/state_sim.html" method="get" target="frame">
      <table>
        <tr>
          <td>Create / Validate BLS signatures</td>
          <td>Validators</td>
          <td>Slots</td>
          <td>Attestation ratio</td>
        </tr>
        <tr>
          <td><input type="radio" name="--validate" value="true">true<input type="radio" name="--validate" value="false"
              checked="true"> false</td>
          <td><input type="text" name="--validators" value="100"></input></td>
          <td><input type="text" name="--slots" value="10"></input></td>
          <td><input type="text" name="--attesterRatio" value="0.9"></input></td>
        </tr>
      </table>
      <input type="submit" value="Run that state transition!">
    </form>
  </div>
  <iframe name="frame" src="" class="second-row"></iframe>
</div>

</html>